<template>
  <div class="index-page">
    <!-- 导航栏 -->
    <CommonHeader
      :header-obj="{ title: $t('合同首页'), rightText: '', leftText: '' }"
      :show-left-arrow="false"
    />
    <div class="logo-t">
      <img src="@/assets/img/gl-img.png" alt="" />
    </div>
    <!-- 快捷功能区 -->
    <div class="quick-functions">
      <div
        class="function-item"
        @click="$router.push('/contract/createList')"
        v-if="menus.includes('contractCreationList')"
      >
        <span class="function-name">{{ $t('合同创建') }}</span>
        <img
          src="@/assets/img/cj.png"
          :alt="$t('合同创建')"
          class="function-icon"
        />
      </div>
      <div class="function-item" v-if="menus.includes('contractChange')">
        <span class="function-name">{{ $t('合同变更') }}</span>
        <img
          src="@/assets/img/bg.png"
          :alt="$t('合同变更')"
          class="function-icon"
        />
      </div>
      <div
        class="function-item"
        @click="$router.push('/contract/queryList')"
        v-if="menus.includes('contractQuery')"
      >
        <span class="function-name">{{ $t('合同查询') }}</span>
        <img
          src="@/assets/img/cx.png"
          :alt="$t('合同查询')"
          class="function-icon"
        />
      </div>
      <div class="function-item" v-if="menus.includes('contractRenewalList')">
        <span class="function-name">{{ $t('合同续签') }}</span>
        <img
          src="@/assets/img/xq.png"
          :alt="$t('合同续签')"
          class="function-icon"
        />
      </div>
    </div>
    <TabBar />
  </div>
</template>
<script>
import CommonHeader from '@/components/CommonHeader.vue'
import TabBar from '@/components/TabBar'
import { mapGetters } from 'vuex'

export default {
  components: {
    CommonHeader,
    TabBar,
  },
  data() {
    return {
      statusMap: new Map([
        [0, this.$t('待审核')],
        [1, this.$t('已通过')],
        [2, this.$t('已驳回')],
        [3, this.$t('审核中')],
      ]),
    }
  },
  computed: {
    ...mapGetters('user', ['menus']),
  },
  mounted() {
    // 页面加载时获取数据
  },
  methods: {
    // 新建合同
    showCreateContract() {
      this.$router.push('/contract/create')
    },
    handleBack() {
      this.$router.go(-1)
    },
  },
}
</script>
<style scoped>
.index-page {
  background: url('~@/assets/img/index-bg.png');
  background-size: cover;
  height: 100vh;
}

.edit-btn {
  height: 32px;
  padding: 0 12px;
}
.logo-t {
  width: 82px;
  margin: 40px 0 0 20px;
  img {
    width: 82px;
  }
}

.quick-functions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px;
  padding: 0 16px;
  margin-top: 13px;
}

.function-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 16px 0;
  border-radius: 8px;
  justify-content: center;
  background: url('~@/assets/img/s-bg.png');
  background-size: 100% 100%;
  height: 90px;
  width: 165px;
}

.function-icon {
  width: 40px;
  height: 40px;
  margin-left: 20px;
}

.function-name {
  font-size: 14px;
  color: #333;
}

.status-card,
.recent-contracts {
  margin: 0 16px 16px;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}

.status-stats {
  display: flex;
  justify-content: space-around;
  text-align: center;
}

.status-item {
  flex: 1;
}

.status-value {
  font-size: 24px;
  font-weight: bold;
  color: #1989fa;
  margin-bottom: 4px;
}

.status-label {
  font-size: 14px;
  color: #666;
}

.status-tag {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.view-all {
  color: #1989fa;
  padding: 0;
  height: auto;
}
</style>
